<template>
  <div class="info-all">
    <div class="title">
      <div class="my-account-title">我的账户</div>
      <div class="user-login-info">
        <span class="wenhouyu">您好！</span>
        <span class="user-name">{{ myMessage[0].username }}</span>
        <span class="account-protected"></span>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="个人中心" name="first">
        <myMessage></myMessage>
      </el-tab-pane>
      <el-tab-pane label="我的订单" name="second">
        <myOrder></myOrder>
      </el-tab-pane>
      <el-tab-pane label="理赔管理" name="third">
        <myCompensation></myCompensation>
      </el-tab-pane>
      <el-tab-pane label="我的钱包" name="fourth">
        <myWallet></myWallet>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import myMessage from "./MyMessage";
import myOrder from "./MyOrder";
import myCompensation from "./MyCompensation";
import myWallet from "./MyWallet";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "homePage"
);
export default {
  components: {
    myMessage,
    myOrder,
    myCompensation,
    myWallet,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {
    this.getMessage(localStorage._id);
  },
  computed: {
    ...mapState(["myMessage"]),
  },
  methods: {
    ...mapActions(["getMessage"]),
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.info-all {
  width: 1000px;
  margin: 20px auto;
  .title {
    display: flex;
    align-items: flex-end;
    .my-account-title {
      width: 20%;
      height: 70px;
      background: url("../../assets/images/my-account-bg.png") no-repeat center;
      background-size: 100% 100%;
      font-size: 24px;
      color: #fff;
      line-height: 70px;
      padding-left: 17px;
    }
    .user-login-info {
      height: 48px;
      width: 80%;
      background: rgba(211, 231, 255, 0.53);
      padding: 0 28px;
      line-height: 48px;
      .wenhaoyou {
        font-size: 15px;
        color: #333;
      }
      .user-name {
        font-size: 15px;
        color: #005bac;
      }
      .account-protected {
        vertical-align: sub;
        display: inline-block;
        width: 63px;
        height: 20px;
        background: url("../../assets/images/account-protected@3x.png")
          no-repeat center;
        background-size: 100% 100%;
        margin-left: 5px;
      }
    }
  }
}
</style>